import { useState, useEffect } from 'react'
import { Card, Button, Table, Tag, message, Popconfirm, Drawer, Form, Input } from 'antd'
import { getCategoryList, addCategory, editCategory, delCategory, getCategoryGoods, delCategoryGoods } from '@/api/category'
function Category() {
  const [levelList, setLevelList] = useState([])
  useEffect(() => {
    getList()
  }, [])
  const getList = () => {
    getCategoryList().then(res => {
      if (res.status === 200) {
        setLevelList(res.data)
      }
    })
  }

  const delLevel = (id: number) => {
    delCategory(id).then(res => {
      if (res.status === 200) {
        getList()
        message.success('删除成功')
      } else {
        message.error('删除失败')
      }
    })
  }
  const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name'
    },

    {
      title: '操作',
      render: (data: any) => (
        <div className='flex2 centerFlex' style={{ maxWidth: '150px' }}>
          <Tag
            color='lime'
            onClick={() => {
              openGoods(data)
            }}
          >
            推荐商品
          </Tag>
          <Tag
            color='lime'
            onClick={() => {
              editBtn(data)
            }}
          >
            修改
          </Tag>
          <Popconfirm
            title='注意'
            description='你确认要删除该分类吗？'
            onConfirm={() => {
              delLevel(data.id)
            }}
            okText='确认'
            cancelText='取消'
          >
            <Tag color='red'>删除</Tag>
          </Popconfirm>
        </div>
      )
    }
  ]
  // 添加修改弹框
  const [openDrawer, setOpenDrawer] = useState(false)
  const [editId, setEditId] = useState(0)
  const [form] = Form.useForm()
  const addBtn = () => {
    setEditId(0)
    setOpenDrawer(true)
    form.resetFields()
  }

  const editBtn = (data: any) => {
    setOpenDrawer(true)
    setEditId(data.id)
    form.setFieldsValue({
      name: data.name
    })
  }
  const saveAddLevelBtn = () => {
    form.validateFields().then(values => {
      if (editId !== 0) {
        editCategory(editId, { ...values }).then(res => {
          if (res.status === 200) {
            message.success('修改成功')
            getList()
            setOpenDrawer(false)
          }
        })
        return
      }

      addCategory({ ...values }).then(res => {
        if (res.status === 200) {
          message.success('添加成功')
          getList()
          setOpenDrawer(false)
        }
      })
    })
  }

  const btn = (
    <div style={{ textAlign: 'right' }}>
      <Button type='primary' size='large' onClick={saveAddLevelBtn}>
        提交
      </Button>
      <Button
        size='large'
        style={{ marginLeft: '15px' }}
        onClick={() => {
          setOpenDrawer(false)
        }}
      >
        取消
      </Button>
    </div>
  )
  const [categoryDraw, setCategoryDraw] = useState(false)
  const [categoryGoods, setCategoryGoods] = useState([])
  const openGoods = (data: any) => {
    setCategoryDraw(true)
    getCategoryGoodsList(data.id)
  }
  const getCategoryGoodsList = (id: number) => {
    getCategoryGoods(id).then(res => {
      if (res.status === 200) {
        setCategoryGoods(res.data)
      }
    })
  }
  const delCategoryGoodsBtn = (id: number, cid: number) => {
    delCategoryGoods(id).then(res => {
      if (res.status === 200) {
        message.success('删除成功')
        getCategoryGoodsList(cid)
      }
    })
  }
  const goodsColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '商品封面',
      render: (data: any) => (
        <>
          <img src={data.cover} style={{ maxWidth: '80px', maxHeight: '80px' }} alt='' />
        </>
      )
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '操作',
      render: (data: any) => (
        <div className='flex2 centerFlex' style={{ maxWidth: '150px' }}>
          <Popconfirm
            title='注意'
            description='是否要删除该记录？'
            onConfirm={() => {
              delCategoryGoodsBtn(data.id, data.category_id)
            }}
            okText='确认'
            cancelText='取消'
          >
            <Tag color='red'>删除</Tag>
          </Popconfirm>
        </div>
      )
    }
  ]
  return (
    <>
      <Card>
        <Button onClick={addBtn} className='mr-10'>
          新增
        </Button>

        <Table columns={columns} dataSource={levelList} rowKey='id' pagination={false} />
      </Card>
      <Drawer
        title={editId === 0 ? '新增分类' : '修改分类'}
        onClose={() => {
          setOpenDrawer(false)
        }}
        open={openDrawer}
        footer={btn}
      >
        <Form form={form}>
          <Form.Item name='name' label='分类名称' rules={[{ required: true, message: '请输入分类名称' }]}>
            <Input placeholder='请输入分类名称' />
          </Form.Item>
        </Form>
      </Drawer>
      <Drawer
        width='40%'
        title='推荐商品'
        onClose={() => {
          setCategoryDraw(false)
        }}
        open={categoryDraw}
        footer={btn}
      >
        <Table bordered columns={goodsColumns} dataSource={categoryGoods} rowKey='id' pagination={false} />
      </Drawer>
    </>
  )
}
export default Category
